<template>
  <view class="container home">
    <!-- 导航栏 -->
    <view class="nav">
      <view class="nav_item">
        <view class="iconfont icon-ziyuan"></view>
        <text>资源</text>
      </view>
      <view class="nav_item">
        <view class="iconfont icon-shipin"></view>
        <text>视频</text>
      </view>
      <view class="nav_item">
        <view class="iconfont icon-tupian"></view>
        <text>图片</text>
      </view>
      <view class="nav_item">
        <view class="iconfont icon-guanyu"></view>
        <text>关于我们</text>
      </view>
    </view>
    
    <!-- 测试内容（已启用） -->
    <view class="box1">
      <text>测试文字</text>
      <image src="/static/test-image.png" alt="测试图片"></image>
    </view>
  </view>
</template>

<style lang="scss">
	// @import url("./a.css");
	.home{
		.box1{
			width: 375rpx;
			height: 375rpx;
			background: $global-color;
			// background: red;
			font-size: 30rpx;
			color: #fff;
			text{
				color: pink;
			}
			image{
				height: 100%;
				width: 100%;
			}
		}
	 .nav {
		display: flex;
		.nav_item {
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background: $shop-color;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
			.icon-tupian{
				font-size: 45rpx;
			}
			text{
				font-size: 30rpx;
				color: $shop-color;
			}
		}
	 }
	}
</style>
